import { useEffect, useState } from 'react'
import ReactDOM  from 'react-dom'
import dialogStyle from './index.module.scss'
import { Button } from 'antd'

export default function Dialog(props){
    // const [visible, setVisible] = useState(false)
    const [container, setContainer] = useState(null)

    useEffect(()=>{
        // 创建一个新的的div元素
        const newContainer = document.createElement('div')
        // 将心的div添加到body上
        document.body.appendChild(newContainer)
        // 设置状态
        setContainer(newContainer)
        // 组件卸载时，从 body 节点上移除 div 元素     
        return () => {       
            document.body.removeChild(newContainer); 
        };
    },[])

    return <>
        {
            props.visible?ReactDOM.createPortal(<div className={dialogStyle['dialog-box']}>
            <div className={dialogStyle['dialog-main']}>
                <div  className={dialogStyle['dialog-title-box']}>
                    <span>{props.title}</span>
                    <span>{props.right}</span>
                </div>
                <div className={dialogStyle['dialog-content-box']}>
                    { props.children }
                </div>
                <div className={dialogStyle['dialog-footer-box']}>
                    <div>
                        <Button type="primary" onClick={()=>{
                            props.confirm&&props.confirm()
                        }}>确定</Button>
                        <Button onClick={()=>{
                            props.cancel&&props.cancel()
                        }}>取消</Button>
                    </div>
                </div>
            </div>
        </div>, container):null
        }
    </>
}

Dialog.defaultProps = {
    title: '测试',
    visible: false,
}